<template>
    <div>
        <div class="hearder-top">
            <span class="fa fa-chevron-left" @click="back"></span>
            <span>注册世纪购</span>
            <router-link to="/login">登录</router-link>
        </div>
         <div id="sregist">
            <span class="fa fa-user"></span>
            <input type="text" id="account" name="account" placeholder="请输入手机号" v-model="account">
            <br>
            <span class="fa fa-lock"></span>
            <input type="password" id="psw" name="psw" placeholder="请输入密码" v-model="psw">
            <br>
            <span class="fa fa-lock"></span>
            <input type="password" id="confirm" name="confirm" placeholder="请再次输入密码" v-model="confirm">
            <br>
            <span class="fa fa-file-image-o"></span>
            <input type="text" id="captcha" name="captcha" placeholder="请输入验证码" v-model="captcha" check-captcha>
            <img src="/api/users/captcha" id="cap">
            <button type="button" @click="refreshCaptcha" id="btn">换一张</button>
            <br>
            <button @touchstart="regBtn">注册</button>
        </div>
    </div>
</template>

<script>
export default {
    data:function(){
        return{
            account:"",
            psw:"",
            confirm:"",
            captcha:""
        }
    },
    methods:{
        back:function(){
            history.back();
        },
        regBtn:function(){
            var params = {
                account:this.account,
                psw:this.psw,
                confirm:this.confirm,
                captcha:this.captcha
            }
            this.http.post("/api/users/regist",params)
            .then(res=>{
                layer.msg(res.data.msg)
                if(!res.data.err){
                    this.$router.push({path:'/login'})
                }
                
            })
        },
        refreshCaptcha:function(){
            $("#cap").attr("src","");
            $("#cap").attr("src","/api/users/captcha?"+Math.random());
        }
    }
}
</script>

<style scoped>
    .hearder-top{
        background-color:red;
        position:fixed;
        left:0;
        top:0;
        width:100%;
        height:40px;
        z-index:1;
        display:flex;
        justify-content:space-around;
    }
    .hearder-top span{
        color:white;
        line-height:40px;
    }
    .hearder-top a{
        color:white;
        text-decoration:none;
        line-height:40px;
    }
    #sregist{
        margin-top:50px;
    }
    #sregist span{
        width: 20%;
        font-size: 14px;
    }
    input{
        width: 75%;
        height: 40px;
        border-bottom: solid 1px #999999;
        border-left: none;
        border-right: none;
        border-top: none;
        display: inline-block;
    }
    button{
        border: none;
        width: 90%;
        height: 30px;
        line-height: 30px;
        margin-top: 15px;
        color: white;
        background-color:red;
    }
    #login span{
        margin-left:-100px;
    }
    #cap{
        position:absolute;
        width:65px;
        height:30px;
        top:173px;;
        left:180px;
    }
    #btn{
        width:55px;
        font-size:12px;
        background-color:rgba(255,255,255,0);
        color:#999999;
        position:absolute;
        top:160px;;
        left:248px;
    }
</style>